<template>
  <div class="detail">
    <div class="header">
      <span style="text-align: center">{{forum.name}}</span>
    </div>

    <hr>
    <div class="main">
      <el-row>
        <el-col :span="3"> <el-image style="width: 100px; height: 100px" :src="url"  />{{user.username}}</el-col>
        <el-col :span="15">
          <el-card class="box-card">
            <div >{{ forumMain.main}}</div>
          </el-card>
        </el-col>
      </el-row>
      <div style="height: 1000px"><h1>test</h1></div>

    </div>


  </div>
</template>

<script setup>
import {onBeforeMount, ref} from 'vue'
import { useRoute } from 'vue-router';
import * as forumApi from '@/api/forum.js'

const url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const route = useRoute();
const temp = ref()
const user = ref({})
const forum = ref({})
const forumMain = ref({})

onBeforeMount(()=>{
  forumApi.selectUserById(route.query.id).then(resp=>{
    temp.value = resp.data
    user.value=temp.value.user
    forum.value=temp.value.forum
  }),
  forumApi.selectMainById(route.query.id).then(resp=>{
    forumMain.value =resp.data
  })
})



</script>

<style scoped>
.detail{
  caret-color: transparent;
  margin-right: 220px;
  margin-left: 220px;
  background-color: #23d5ab;
}
.box-card {
  width: 800px;
  height: 100%;

}


</style>
